<template>
    <div class="editor-box" :style="'width:'+width+'px'">
    <!-- 图片上传组件辅助-->
        <el-upload
            class="avatar-uploader"
            :action="rootUrl+'base/upload-file'"
            name="file"  
            :headers="header"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :on-error="uploadError"
            :before-upload="beforeUpload">
        </el-upload>
        <quill-editor ref="myTextEditor"
            :content="content" 
            :options = "editorOption"
            @change="onEditorChange($event)" >
        </quill-editor>
    </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import {IMG_ROOT,API_ROOT} from './../config'
// 工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{'header': 1}, {'header': 2}],               // custom button values
  [{'list': 'ordered'}, {'list': 'bullet'}],
  [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
  [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
  [{'direction': 'rtl'}],                         // text direction

  [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
  [{'header': [1, 2, 3, 4, 5, 6, false]}],

  [{'color': []}, {'background': []}],          // dropdown with defaults from theme
  [{'font': []}],
  [{'align': []}],
  ['link', 'image', 'video'],
  ['clean']                                         // remove formatting button
]

export default {
    props:{
        width:{
            default:350
        },
        content:{
            default:'',
            type:String
        }
    }, 
    data() {
        return{  
            rootUrl:API_ROOT,
            header:{
                token:sessionStorage.getItem('h_token'),
                uid:'admin_'+sessionStorage.getItem('u_id') 
            },
            editorOption:{
                quillUpdateImg: false, // 根据图片上传状态来确定是否显示loading动画，刚开始是false,不显示 
                placeholder: '',
                theme: 'snow',  // or 'bubble'
                modules: {
                    toolbar: {
                    container: toolbarOptions,  // 工具栏
                    handlers: {
                        'image': function (value) {
                            if (value) {
                                document.querySelector('.avatar-uploader input').click()
                            } else {
                                this.quill.format('image', false);
                            }
                        }
                        }
                    }
                }
            }
        }
    }, 
    components: {
    	quillEditor
    },
    methods: {
        onEditorChange({ editor, html, text }){ 
            this.$emit('change',html);
        }, 
        beforeUpload() {
            // 显示loading动画
            this.quillUpdateImg = true
        },
        
        uploadSuccess(res, file) {
            // res为图片服务器返回的数据
            // 获取富文本组件实例
            let quill = this.$refs.myTextEditor.quill
            // 如果上传成功
            if (res.code == 200 && res.data != null) {
                // 获取光标所在位置
                let length = quill.getSelection().index;
                // 插入图片  res.data.data为服务器返回的图片地址
                quill.insertEmbed(length, 'image', IMG_ROOT+res.data)
                // 调整光标到最后
                quill.setSelection(length + 1)
            } else {
                this.$message.error('图片插入失败')
            }
            // loading动画消失
            this.quillUpdateImg = false
        },
    
        // 富文本图片上传失败
        uploadError() {
            // loading动画消失
            this.quillUpdateImg = false
            this.$message.error('图片插入失败')
        }
    }, 
}
</script>

<style lang="scss" scoped>
.editor-box {
    font-size:14px;
    background:#fff;
    display:inline-block;
    
    .quill-editor{ 
        height:300px; 
    }
}
</style>
